<template>
    <div class="w-full max-w-sm mx-auto">
        <!-- 个人信息卡片 -->
        <div
            class="divCommon bg-white/40 backdrop-blur-sm rounded-xl shadow-md p-4 transition-all hover:shadow-lg flex flex-col">
            <n-avatar round :size="68" :src="avatar"
                class="mx-auto mb-4 ring-2 ring-white/40 ring-offset-2" object-fit="cover"
                fallback-src="https://yanxuan.nosdn.127.net/214c29018584893e421e1777271439b2.png" />
            <!-- Git链接 -->
            <div class="underline-animation mx-auto mt-3 mb-3 cursor-pointer">
                <span>Git地址</span>
            </div>

            <!-- 数据统计 -->
            <div class="flex justify-between gap-3 mb-4">
                <div class="flex-1 text-center bg-gray-50/40 rounded-lg p-2 hover:bg-gray-100/40 transition-colors">
                    <div class="text-sm text-gray-500 mb-1">文章</div>
                    <div class="text-2xl font-bold text-blue-600">{{ props.countList?.articleCount }}</div>
                </div>
                <div class="flex-1 text-center bg-gray-50/40 rounded-lg p-2 hover:bg-gray-100/40 transition-colors">
                    <div class="text-sm text-gray-500 mb-1">友链</div>
                    <div class="text-2xl font-bold text-blue-600">{{ props.countList?.radioCount }}</div>
                </div>
                <div class="flex-1 text-center bg-gray-50/40 rounded-lg p-2 hover:bg-gray-100/40 transition-colors">
                    <div class="text-sm text-gray-500 mb-1">评论</div>
                    <div class="text-2xl font-bold text-blue-600">{{ props.countList?.commentCount }}</div>
                </div>
            </div>
        </div>

        <!-- 分类标签 -->
        <div
            class="divCommon bg-white/40 backdrop-blur-sm rounded-xl shadow-md p-4 mt-5 min-h-[12.5rem] hover:shadow-lg transition-all">
            <div class="flex items-center mb-4">
                <img :src="tag" alt="标签" class="w-5 h-5 mr-2">
                <h3 class="text-lg font-semibold text-gray-800">分类</h3>
            </div>
            <div class="flex flex-wrap gap-2">
                <n-tag v-for="tag in tagList" :key="tag" :class="['px-3 py-1 bg-blue-100/40 text-blue-800 hover:bg-blue-200/40 transition-colors cursor-pointer rounded-full text-sm',
                    { 'active': tagSelect.includes(tag as string) }]" @click="clickTag(tag as string)">
                    {{ tag }}
                </n-tag>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import tag from '@/assets/icon/tag.svg';
import { ref,onMounted } from "vue"
import {getAvatar } from '@/api/home/index';
import { AsyncTaskHandler } from '@/utils/asyncTaskHandler'
onMounted(async () => {
    let res = await AsyncTaskHandler.handleSingleTask(getAvatar())
    avatar.value = res.data
})
const avatar = ref('')
const tagSelect = ref<string[]>([])
const $emit = defineEmits(['clickTag'])
const props = defineProps({
    tagList: {
        type: Array,
        default: () => []
    },
    countList: {
        type: Object,
        default: () => { }
    }
})
// 处理点击添加和删除
// @ts-ignore
function updateTagList(str: string): void {
    if (tagSelect.value.includes(str)) {
        // 如果字符串存在，删除它
        tagSelect.value = tagSelect.value.filter(item => item !== str);
    } else {
        // 如果字符串不存在，添加它
        tagSelect.value.push(str);
    }
}

const clickTag = (tag: string) => {
    updateTagList(tag)
    $emit('clickTag', tagSelect.value)
}
</script>

<style scoped lang="scss">
/**
    鼠标移入样式 Git地址
*/
.underline-animation {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.underline-animation::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: .125rem;
    bottom: -0.3125rem;
    left: 0;
    background-color: $common-color;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

.underline-animation:hover {
    color: $common-color;
}

.underline-animation:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.active {
    background-color: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
    border: 1px solid #3b82f6;
    font-weight: bold;
}
</style>